<template>
  <div class="table">
    <div class="top">
      <div class="item">
        <div class="label">
          <span>*</span>
          <span>作业码头：</span>
        </div>
        <!--  @change="getVel" -->
        <el-select clearable style="width: 150px" size="small"  @change="$emit('setTerm',form.termCode)"
                   v-model="form.termCode" placeholder="请选择作业码头">
            <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
          </el-select>
      </div>
      <div class="item">
        <div class="label">
          <span></span>
          <span>箱号：</span>
        </div>
        <el-input v-model="form.cntrNo"
                  placeholder="请输入"
                  size="small"
                  style="width:125px">
        </el-input>
      </div>
      <div class="item">
        <div class="label">
          <span></span>
          <span>提单号：</span>
        </div>
        <el-input v-model="form.billNo"
                  placeholder="请输入"
                  size="small"
                  style="width:125px">
        </el-input>
      </div>
      
      <div class="item">
        <el-button type="primary"
                   class="search"
                   @click="getDate">查询</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                @selection-change="handleSelectionchangeS"
                :header-cell-style="{ background: '#EEF1F5'}"
                style="width: 100%">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column prop="cntrno"
                         label="箱号"
                         width="180">
        </el-table-column>
        <el-table-column prop="planGoods.billno"
                         label="提单号"
                         width="180">
            <template slot-scope="scope">
              {{ scope.row.containerGoodList && scope.row.containerGoodList.length ? scope.row.containerGoodList[0].planGoods.billno || '' : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="ctypecd"
                         label="船公司箱型"
                         width="180">
        </el-table-column>
        <el-table-column prop="cstCopercd"
                         label="持箱人"
                         min-width="220">
            <template slot-scope="scope">
              {{ (scope.row.cstCopercd || '') + '/' + (scope.row.cstCoperName || '') }}
            </template>
        </el-table-column>
        <el-table-column prop="cstOwnercd" label="箱控公司" width="180">
          <template slot-scope="scope">
            {{ scope.row.cstOwnercd }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="iVoyName"
                         label="进口船名航次"
                         width="180">
        </el-table-column> -->
        <el-table-column prop="cweight"
                         label="箱货总量"
                         width="180">
        </el-table-column>
        <!-- <el-table-column prop="passfg"
                         label="海关放行"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="termCode"
                         label="所属码头"
                         width="180">
        </el-table-column> -->
        <!-- <el-table-column prop="workZone"
                         label="作业区"
                         width="180">
        </el-table-column> -->
        <el-table-column prop="internalfg"
                         label="贸易类型"
                         width="180">
                         <template slot-scope="scope">
                            <span v-if="'Y'===scope.row.internalfg">内贸</span>
                            <span v-if="'N'===scope.row.internalfg">外贸</span>
                         </template>
        </el-table-column>
        <el-table-column prop="planGoods.gname"
                         label="货名"
                         width="180">
            <template slot-scope="scope">
              {{ scope.row.containerGoodList && scope.row.containerGoodList.length ? scope.row.containerGoodList[0].planGoods.gname || '' : '' }}
            </template>
        </el-table-column>
        <!-- <el-table-column prop="consignee"
                         label="货主"
                         width="180">
        </el-table-column>
        <el-table-column prop="gagent"
                         label="货代"
                         width="180">
        </el-table-column>
        <el-table-column prop="markerno"
                         label="唛头"
                         width="180">
        </el-table-column>
        <el-table-column prop="dtpDnggCd"
                         label="危类"
                         width="180">
        </el-table-column>
        <el-table-column prop="unno"
                         label="UNNO"
                         width="180">
        </el-table-column>
        <el-table-column prop="temperature"
                         label="温度"
                         width="180">
        </el-table-column>
        <el-table-column prop="tempUnit"
                         label="温度单位"
                         width="180">
        </el-table-column> -->
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'unpackingTable',
  components: {},
  data() {
    return {
      termList:[],
      dataList: {
        termList: [],
      },
      form: {
        //termCode: 'HX',
        planTag: 'UNBOX',
      },
      oriForm: {
        //termCode: 'HX',
        planTag: 'UNBOX',
      },
      form1: {},
      tableData: [],
      shipNo: [],
      selection: [],
    }
  },

  methods: {
    setTra(val) {
      // "0A"  提重(内贸)
      //"01" 提重（外贸）
      if (val === 'Y') {
        this.form.opmode = '0A'
      } else {
        this.form.opmode = '01'
      }
    },
    handleSelectionchangeS(val) {
      this.selection = val
      //this.$refs.table.toggleRowSelection(val, true);
    },
    voyName(item) {
      console.log(item)
      this.form.voyId = JSON.parse(item).id
      this.form.voyName = JSON.parse(item).vessels.cnname
      console.log(JSON.parse(item))
      console.log(this.form)
    },
    getDate() {
      console.log(88888)
      if (!this.form.termCode) {
        this.$message.error('请选择作业码头！')
        return
      }
      if (!(this.form.cntrNo || this.form.billNo)) {
        this.$message.error('请输入箱号或提单号！')
        return
      }
      //this.$emit('set',this.form.termCode)
      this.$api
        .tosGetContainer(this.form)
        .then((res) => {
          this.tableData = res.data
        })
        .catch(res=>{
          this.tableData = []
        })
      //this.$api.
      //this.$emit('search',this.form)
      // console.log(88888)
      // if (this.form.termCode) {
      //   this.$message.error('请选择码头')
      //   return
      // }
    },
    setFile() {
      this.dataList = {
        INTERNALFG_IM: [],
        sell: [],
        customer: [],
        consignor: [],
        cstTrnscomCd: [],
        workZone: [],
      }
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      this.$api
        .voyagesPage({
          //termCode: 'HX',
          size: 999,
          current: 0,
        })
        .then((res) => {
          this.shipNo = res.data.records
        })
        .catch()

      this.$api
        .refCode({
          domain: 'INTERNALFG_IM',
        })
        .then((res) => {
          this.dataList.INTERNALFG_IM = res.data.data
          this.$forceUpdate()
        })
        .catch()
      // let info=localStorage.getItem('userInfo')
      // console.log(info)
      // if (undefined !== info) {
      //   this.form.cstCopercd = JSON.parse(info).customerCode
      //   this.form.cstCoperName = JSON.parse(info).name
      // }
    },
  },

  computed: {},
  created() {
    this.setFile()
  },
  mounted() {},
}
</script>
<style lang='less' scoped>
.table {
  background: #fff;
  .top {
    padding: 20px;
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 16px;
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 12px;
      .label {
        margin-right: 5px;
        span:first-child {
          color: #ff3838;
        }
      }
    }
    .search {
      background: #0f47b8;
      height: 30px;
      padding: 5px 10px;
    }
  }
  .table {
    padding: 20px;
  }
}
</style>